<template>
	<view class="pages">
		<detail-popup  ref="detailPopup" :item="currentSelectItem" mode="bottom"
		    :dark-mode="true"  @searchByTags="handleSearchByTags" @searchByGens="handleSearchByGens"
			@searchByPeople="handleSearchByPeople" @clickSetMedia="clickSetMediaDetail"
			@clickSimilarMedia="clickSimilarMediaDetail"></detail-popup>
		<mvBar :mysNavConfig="mysNavConfig">
			<view slot="left" class="left" style="display: flex;align-items: center;margin-left: 20px;" @tap="openProfilePopup">
				<image class="img" style="width: 20px;height: 20px;" src="/static/icon/menu (1).png"></image>
			</view>
		</mvBar>
		
		<uni-drawer ref="showProfile" style="background-color: transparent;" side="left"
		    :mask="true" :width="300">
		      <profile :isDrawer="true"></profile>
		</uni-drawer>

		<scroll-view class="no-scrollbar" :show-scrollbar="false" scroll-y="true" :style="{height: scrollHeight +'px'}">
			<!-- <piaoyiSwiper :list="recommend" :itemMargin="160" :autoplay="true" :interval="5000" :duration="1000" /> -->
			<view style="padding-bottom: 20px;">
				<view class="top">
					<text>媒体源</text>
				</view>
				<uv-grid :border="false" align="center">
					<uv-grid-item @click="clickMediaSourceItem(item)" v-for="(item, index) in recommend" :key="index">
						<view class="imagebox">
							<image class="image" :src="item.cover"
							 mode="aspectFill" lazy-load
							></image>
						</view>
						<text class="grid-text">{{item.Name}}</text>
					</uv-grid-item>
				</uv-grid>
			</view>
			<view v-for="item in categorys" :key="item.parent.Id">
				<view v-if="item.series.length>0">
					<view class="top">
						<text @click="clickItem(item.parent)">{{ item.parent.Name }}</text>
						<uni-icons @click="clickItem(item.parent)" color="white" type="right" size="20"></uni-icons>
					</view>
					<uv-scroll-list
						indicatorColor="#fff0f0"
						indicatorActiveColor="#f56c6c">
							<horizontal :list="item.series" @open-detailPopup="openDetailPopup" />
					</uv-scroll-list>
		
				</view>
			</view>
			<view style="height: calc(100rpx + env(safe-area-inset-bottom))">
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import piaoyiSwiper from '@/components/piaoyi-swiper/piaoyi-swiper.vue'
	import horizontal from '@/components/horizontal.vue'
	import request from '@/common/request'
	import mysNavConfig from '@/pages/index/indexNavConfig.js';
	import mvBar from "@/components/mys_navBar/mysNavBar";
	import profile from '@/pages/profile/profile.vue'
	import detailPopup from '@/components/detail-popup.vue';

	export default {
		name: 'discover',
		components: {
			piaoyiSwiper,
			horizontal,
			mvBar,
			profile,
			detailPopup
		},
		data() {
			return {
				titles: [],
				scrollHeight: 0,
				scrollWidth: 0,
				recommend: [],
				categorys: [],
				mysNavConfig: mysNavConfig,
				currentSelectItem: {},
			}
		},
		async onLoad(option) {
			uni.getSystemInfo({
				success: (res) => {
					// 滚动区域高度 = 窗口高度 - 搜索框高度
					this.scrollHeight = res.screenHeight - 180;
					this.scrollWidth = res.screenWidth;
				}
			});
		},
		async onShow(option) {
			this.getViewData()
		},
		methods: {
			handleSearchByTags(tags) {
				let seriesParams = {
					ParentType: "Tag",
					ChildIds: tags.map(item => item.Id).join(','),
					ParentName: tags.map(item => item.Name).join(',')
				}
				uni.navigateTo({
					url: `/pages/series/goDetail?params=${encodeURIComponent(JSON.stringify(seriesParams))}`
				})
			},
			handleSearchByGens(tags) {
				let seriesParams = {
					ParentType: "Genre",
					ChildIds: tags.map(item => item.Id).join(','),
					ParentName: tags.map(item => item.Name).join(',')
				}
				uni.navigateTo({
					url: `/pages/series/goDetail?params=${encodeURIComponent(JSON.stringify(seriesParams))}`
				})
			},
			handleSearchByPeople(people) {
				let seriesParams = {
					ParentType: "People",
					ChildIds: people.Id,
					ParentName: people.Name
				}
				uni.navigateTo({
					url: `/pages/series/goDetail?params=${encodeURIComponent(JSON.stringify(seriesParams))}`
				})
			},
			openDetailPopup(item) {
				this.currentSelectItem = item
				this.$refs.detailPopup.open()
			},
			clickSetMediaDetail(videoItem){
				this.currentSelectItem = videoItem
				this.$refs.detailPopup.open()
			},
			clickSimilarMediaDetail(videoItem){
				this.currentSelectItem = videoItem
				this.$refs.detailPopup.open()
			},
			openProfilePopup(){
				this.$refs.showProfile.open();
			},
			clickMediaSourceItem(item) {
				let seriesParams = {
					ParentType: item.CollectionType=="boxsets"?"BoxSet":"MediaSource",
					ChildIds: item.Id,
					ParentName: item.Name
				}
				uni.navigateTo({
					url: `/pages/series/goDetail?params=${encodeURIComponent(JSON.stringify(seriesParams))}`
				})
			},
			clickItem(item) {
				let seriesParams = {
					ParentType: item.CollectionType=="boxsets"?"BoxSet":"MediaSource",
					ChildIds: item.Id,
					ParentName: item.Name
				}
				uni.navigateTo({
					url: `/pages/series/goDetail?params=${encodeURIComponent(JSON.stringify(seriesParams))}`
				})
			},
			async getViewData() {
				let userTmp1 = uni.getStorageSync('user')
				if (!userTmp1) {
					return
				}
				let userTmp = JSON.parse(userTmp1)
				const data = await request.get(`/emby/Users/${userTmp.userId}/Views`)
				let serverUrl = `${userTmp.serverip}:${userTmp.serverport}`
				if (!serverUrl.startsWith('http')) {
					serverUrl = `http://${serverUrl}`
				}
				let categorys = []
				for (const item of data.Items) {
					let imageStr = `${serverUrl}/emby/Items/${item.Id}/Images/Primary`
					item.cover = imageStr
					const detailData = await request.get(`/emby/Users/${userTmp.userId}/Items/Latest`, {
						Limit: 16,
						Fields: "BasicSyncInfo,CanDelete,PrimaryImageAspectRatio,ProductionYear",
						ImageTypeLimit: 1,
						EnableImageTypes: "Primary",
						ParentId: item.Id
					})
					detailData.forEach(item1 => {
						let imageStr1 = `${serverUrl}/emby/Items/${item1.Id}/Images/Primary`
						item1.cover = imageStr1
					})
					categorys.push({
						parent: item,
						series: detailData
					})
				}
				this.recommend = data.Items
				this.categorys = categorys
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		display: flex;
		align-items: center;
		flex-flow: row;
		justify-content: space-between;
		padding: 10px;
		font-size: 1.2rem;
		font-weight: bold;
	}
	.imagebox {
		position: relative;
		width: 118px;
		height: 158px;
		margin: 6px 0;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 4px;
			object-fit: cover;
		}
		.image {
			margin-right: 10px;
			border-radius: 5px;
			box-shadow: 2px 2px 6px;
			background-image: url('@/static/img/errorImg.jpg');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: initial;
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 4px;
			background-position: center center;
			background-size: 100% 100%;
		}
	}
	// ::v-deep .uni-drawer__content {
	//   padding-top: 0;
	//   background-color: #181818;
	// }
	
	// ::v-deep .uni-drawer {
	//   background-color: transparent !important;
	// }
	// ::v-deep .horizontalbox{
	// 	padding: 0 3px;
	// 	overflow-x: auto;
	// }
	// .no-scrollbar {
	//   scrollbar-width: none;
	//   -ms-overflow-style: none;
	//   padding-right: 20rpx;
	//   margin-right: -20rpx;
	// }
	
	// .no-scrollbar::-webkit-scrollbar {
	//   display: none;
	//   width: 0;
	//   height: 0;
	//   -webkit-appearance: none;
	// }
	// .no-scrollbar::-webkit-scrollbar-track {
	//   display: none;
	// }
	// .no-scrollbar::-webkit-scrollbar-thumb {
	//   display: none;
	//   -webkit-appearance: none;
	// }
</style>